<template>
  <div class="buyMian-slide">
    <div class="buyMian-slide-contain">
      <div class="s1_age" :style="{left:left+'px'}">{{ s1AgeVal }}</div>
      <div class="s2_age" :style="{right:right+'px'}">{{ s2AgeVal }}</div>
      <slider block-size="10" block-color="#1C6AD7" :style="{width:silde1W+'%'}" class="slider-left" :min="s1minAge" :max="s1maxAge" backgroundColor="#1C6AD7" activeColor="#ccc" @changing="changing" @touchstart="changeStart" @change="changed" data-idx="1"></slider>
      <slider block-size="10" block-color="#1C6AD7" v-if="!change" :style="{width:silde2W+'%'}" class="slider-right" :min="s2minAge" :max="s2maxAge" backgroundColor="#ccc" activeColor="#1C6AD7" @changing="changing" @touchstart="changeStart" @change="changed" data-idx="2"></slider>
    </div>
    <div class="buyMian-slide-range">
      <div>{{s1minAge}}岁</div>
      <div>{{s2maxAge}}岁</div>
    </div>
  </div>
</template>
<script setup>
  import {ref,reactive,onMounted} from 'vue'
  const s1minAge = ref(18);
  const s1maxAge = ref(60);
  const s2minAge = ref(18);
  const s2maxAge = ref(60);
  const silde1W = ref(100);
  const silde2W = ref(0);
  const s1AgeVal = ref(18);
  const s2AgeVal = ref(60);
  const rate = ref(0.42);
  const change = ref(false);
  const SW = ref(342);
  const left = ref(0);
  const right = ref(-26);
  // 开始滑动
  const changeStart = (e)=>{
    change.value =  false
    var idx = parseInt(e.currentTarget.dataset.idx)
    if (idx === 1) {
      var dW = (s2AgeVal.value - s1minAge.value) / rate.value
      silde1W.value = dW
      silde2W.value = 100 - dW
      s1maxAge.value =  s2AgeVal.value
      s2minAge.value =  s2AgeVal.value 
      left.value = (100-dW.value)*SW.value;
    } else if (idx === 2) {
      var dw = (s2maxAge.value - s1AgeVal.value) / rate.value
      silde2W.value = dw
      silde1W.value = 100 - dw
      s1maxAge.value =  s1AgeVal.value
      s2minAge.value =  s1AgeVal.value 
      right.value = (100-dW.value)*SW.value;
    }
  }
 
  // 正在滑动
  const changing = (e)=> {
    var idx = parseInt(e.currentTarget.dataset.idx)
    var value = e.detail.value
    if (idx === 1) {
      var dW =  (s2maxAge.value - s1AgeVal.value) / rate.value
      s1AgeVal.value = value
      left.value = (100-dW)/100*SW.value;
    } else if (idx === 2) {
      var dW = (s2AgeVal.value - s1minAge.value) / rate.value
      s2AgeVal.value = value
      right.value = (100-dW)/100*SW.value - 28;
    }
  }
  const changed = (e)=> {
    if (s1AgeVal.value === s2AgeVal.value && s2AgeVal.value === s2maxAge.value) {
      change.value = true
    }
  }
  defineExpose({
    s1AgeVal,
    s2AgeVal,
  })
</script>
<style scoped lang="scss">
    .flexC{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .buyMian-slide{
      margin-bottom: 20rpx;
      margin:0 24rpx;
    }

    
    .buyMian-slide-contain {
      width: 100%;
      display: flex;
      position: relative;
      left: -25rpx;
      .s1_age,.s2_age{
        position: absolute;
        background-color: #1C6AD7;
        width: 60rpx;
        height: 30rpx;
        color: #fff;
        font-size: 20rpx;
        line-height: 30rpx;
        border-radius: 5rpx;
        @extend .flexC;
        top: -20rpx;
      }
      .s1_age{
        left: 0;
        &::after{
          content: '';
          position: absolute;
          left: 50%;
          transform: translate(-50%);
          bottom: -18rpx;
          width: 0;
          height: 0;
          border: 10rpx solid transparent;
          border-top-color: #1C6AD7;
        }
      }
      .s2_age{
        left: auto;
        right: -28px;
        &::after{
          content: '';
          position: absolute;
          left: 50%;
          transform: translate(-50%);
          bottom: -18rpx;
          width: 0;
          height: 0;
          border: 10rpx solid transparent;
          border-top-color: #1C6AD7;
        }
      }
    }
    
    .buyMian-slide-range {
      @extend .flexC;
      justify-content: space-between;
      font-size: 26rpx;
      color: #8a8a8a;
      margin-top: -20rpx;
    }
    
    .slider-left, .slider-right {
      margin-right: -24rpx;
    }
  
</style>